<template>
  <div>
    <!-- 头部导航 -->
    <div class="title">
      <el-breadcrumb>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="tops">
      <div class="xiangyou" @click="returns">&lt;</div>
      <!-- 推荐 -->
    </div>
    <div class="indexit">
      <div class="indexit_int">
        <!-- 头部商品管理 -->
        <div class="inde_top">
          <div class="inde-right" @click="dialogTableVisible = true">选择商品</div>
        </div>
        <!-- 底部图片渲染 -->
        <div class="booms_index">
          <div v-for="item in gridDatas" :key="item.id">
            <div class="images"><img :src="item.icon" alt="" /></div>
          </div>
        </div>
        <!-- 对话框 -->
        <div>
          <el-dialog title="选择药品" :visible.sync="dialogTableVisible">
            <el-table :data="gridData" border :header-cell-style="{ background: '#F6F6F6', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
              <el-table-column label="商品" width="520">
                <template v-slot="{ row }">
                  <div class="image"><img :src="row.icon" alt="" /></div>
                  <div class="list_title">{{ row.title }}</div>
                </template>
              </el-table-column>
              <el-table-column label="管理" width="200">
                <template slot-scope="{ row }">
                  <el-button size="mini" @click="handleEdit(row)">{{ row.lin == 1 ? '选择' : '取消' }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getnavicme, navicon,getnavicmes } from '../../api/index'
export default {
  data() {
    return {
      gridData: [],
      gridDatas:[],
      dialogTableVisible: false,
      ent: true,
      ents: false,
      list_item: [],
    }
  },
  created() {
    this.getadd(),
    this.addmyname()
  },
  methods: {
    //点击确定显示取消
    handleEdit(row) {
      let currentLin = row.lin == 1 ? 0 : 1
      this.gridData.map((item) => {
        if (item.id == row.id) {
          return (item.lin = currentLin)
        }
        // console.log(item,'aaa')
        // console.log(currentLin,'aaaa')
        navicon({ id: row.id, lin: currentLin }).then((res) => {
          console.log(res)
        })
      })
    },
    addmyname(){
      getnavicmes({
        lin:'1'
      }).then(res=>{
        this.gridDatas = res.data
      })
    },
    //请求列表数据
    getadd() {
      getnavicme().then((res) => {
        this.gridData = res.data
      })
    },
    //路由跳转
    returns() {
      this.$router.push({
        name: 'index',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 10px;
}
//头部
.tops {
  width: 100%;
  height: 40px;
  display: flex;
  line-height: 40px;
  text-indent: 20px;
  .xiangyou {
    font-size: 20px;
    cursor: pointer;
  }
}

//内容
.indexit {
  width: 80%;
  height: 300px;
  padding: 0 100px;
  box-sizing: border-box;
  //整体盒子
  .indexit_int {
    width: 100%;
    height: 100%;
    // background: sandybrown;
    padding: 20px 0 0 0;
    box-sizing: border-box;
  }
  .inde_top {
    width: 100%;
    height: 30px;
    background: #bbbbbb;
    position: relative;
    margin-bottom: 30px;
    .inde-right {
      width: 100px;
      height: 100%;
      border: 1px solid #bbb;
      position: absolute;
      right: 0;
      text-align: center;
      line-height: 30px;
      background: white;
      box-sizing: border-box;
    }
  }
  .booms_index {
    width: 100%;
    height: 200px;
  }
}

.image {
  width: 50px;
  height: 50px;
  float: left;
  img {
    width: 100%;
  }
}
.list_title {
  line-height: 60px;
}

.images {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 20px;
  img {
    width: 100%;
  }
}
</style>
